import React from "react";
import { Card, Button, Toast, Image } from "antd-mobile";
import { AntOutline, RightOutline } from 'antd-mobile-icons'
import styles from "./style.css"

const SearchItemView = ({ data }) => {

    const onBodyClick = () => {

    }
    const onHeaderClick = () => {

    }

    return (

        <div>
            <Card
                key={data.id}
                title={
                    <div style={{ fontWeight: 'normal' }}>
                        <AntOutline style={{ marginRight: '4px', color: '#1677ff' }} />
                        {data.title}
                    </div>
                }
                extra={<RightOutline />}
                onBodyClick={onBodyClick}
                onHeaderClick={onHeaderClick}
                style={{ borderRadius: '16px' }}
            >
                <div> <Image src={"https://ts4.cn.mm.bing.net/th?id=OIP-C.XoueHqrn7dUgAHTAA0nQ4QHaFj&w=288&h=216&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"} /></div>
                <div className={styles.content} style={{
                    fontSize: "20px",
                    display: "flex",
                    justifyContent: "flex-start",
                    margin: "10px"
                }}>{data.account_name}</div>
                <div style={{
                    fontSize: "20px",
                    display: "flex",
                    justifyContent: "flex-end",
                    margin: "10px"
                }} className={styles.footer} onClick={e => e.stopPropagation()}>
                    <Button
                        size="mini"
                        color='primary'
                        onClick={() => {
                            Toast.show('Button')
                        }}

                    >
                        了解更多
                    </Button>
                </div>
            </Card>
        </div>
    )
}

export default SearchItemView